<script lang="ts" setup>
import championAvatar from '@/components/lucImages/championAvatar.vue'
</script>

<template>
  <div class="player_card">
    <el-card class="w-full" body-class="player_card_body" shadow="hover">
      <!-- 玩家信息 -->
      <div class="player_card_info">
        <div class="player_card_info_avatar">
          <championAvatar width="3.8rem" height="3.8rem" />
        </div>
        <div class="player_card_info_main">
          <div class="info_item">
            <div class="player_name">
              <span class="player_name_main">召唤师姓名召唤师姓名</span>
              <span class="player_num">#12450</span>
            </div>
          </div>
          <div class="info_item">
            <div class="player_level">Lv. 1933</div>
          </div>
        </div>
      </div>
      <!-- 胜负一览 -->
      <div class="player_card_overview">
        <div v-for="item in 30" :key="item" class="overview_item"></div>
      </div>
      <!-- 玩家标签 -->
      <div class="player_card_tags">
        <el-tag size="small" type="primary">Tag 1</el-tag>
        <el-tag size="small" type="success">Tag 2</el-tag>
        <el-tag size="small" type="info">Tag 3</el-tag>
        <el-tag size="small" type="warning">Tag 4</el-tag>
        <el-tag size="small" type="danger">Tag 5</el-tag>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.player_card {
  cursor: pointer;
  user-select: none;

  ::v-deep(.player_card_body) {
    padding: 1rem 1.5rem 1rem;
  }

  .player_card_info {
    display: flex;
    align-items: flex-start;
    padding-bottom: .5rem;
    gap: 1rem;

    .player_card_info_avatar {
      flex-shrink: 0;
    }

    .player_card_info_main {
      width: 100%;
      padding-top: .3rem;
      color: var(--el-color-info-light-1);

      .info_item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;

        .player_name {
          .player_name_main {
            display: inline-block;
            max-width: 8em;
            font-weight: bold;
            font-size: var(--el-font-size-extra-small);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .player_num {
            margin-left: .5rem;
            font-size: var(--el-font-size-extra-small);
            color: var(--el-color-info-light-5);
            opacity: 0.8;
          }
        }

        .player_level {
          font-size: var(--el-font-size-extra-small);
        }

        & + .info_item {
          margin-top: .5rem;
        }
      }
    }
  }

  .player_card_overview {
    border-top: var(--el-border);
    padding: .4rem 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .1rem;

    .overview_item {
      width: .7rem;
      height: .7rem;
      background-color: #F56C6C;
    }
  }

  .player_card_tags {
    border-top: var(--el-border);
    padding: .4rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
}
</style>
